<template>
	<view>
		<u-sticky bgColor="#fff">
			<view class="nav">
				<u-tabs :list="list" @click="toggle" bgColor="#fff" lineWidth="40" lineHeight="7" :activeStyle="{
						color: '#303133',
						fontWeight: 'bold',
				}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"></u-tabs>
			</view>
		</u-sticky>
		<view v-show="isshow">
			<introduce></introduce>
		</view>
		<view v-show="!isshow">
			<tutorials></tutorials>
		</view>

		<view class="box">
			隐形占位盒子
		</view>

		<!-- 添加按钮 -->
		<view class="add-btn" @click="toAdd">
			添加
		</view>

		<!-- 自定义导航栏 -->
		<u-tabbar :value="value" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
			<u-tabbar-item text="首页" icon="home" @click="toIndex"></u-tabbar-item>
			<u-tabbar-item text="活动" icon="more-circle" @click="toActivity"></u-tabbar-item>
			<u-tabbar-item text="用户" icon="account" @click="toUser"></u-tabbar-item>
			<u-tabbar-item text="商家" icon="bag" @click="toGoods"></u-tabbar-item>
		</u-tabbar>

	</view>
</template>

<script>
	import introduce from '@/pages/admin/components/introduce.vue'
	import tutorials from '@/pages/admin/components/tutorials.vue'
	export default {
		components: {
			introduce,
			tutorials,
		},
		data() {
			return {
				value: 0,
				type: 'introduce',
				list: [{
						name: '茶文化介绍',
					},
					{
						name: '茶艺教程'
					},
				],

			}
		},
		methods: {
			//前往添加
			toAdd() {
				uni.navigateTo({
					url: `/pages/admin/admin-add/admin-add?type=${this.type}`,
				})
			},
			//切换
			toggle(item) {
				if (item.index === 0)
					this.type = "introduce"
				else this.type = "tutorials"
				console.log(item)
			},
			//导航栏跳转
			toIndex() {
				uni.reLaunch({
					url: '/pages/admin/admin'
				})
			},
			toActivity() {
				uni.reLaunch({
					url: '/pages/admin/activity/activity'
				})
			},
			toUser() {
				uni.reLaunch({
					url: '/pages/admin/user/user'
				})
			},
			toGoods() {
				uni.reLaunch({
					url: '/pages/admin/merchant/merchant'
				})
			}
		},

		computed: {
			isshow() {
				if (this.type === 'introduce')
					return true
				else return false
			}
		}

	}
</script>

<style lang="scss" scoped>
	.nav {
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.box {
		visibility: hidden;
		height: 150rpx;
	}

	.add-btn {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 100rpx;
		z-index: 1;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		margin: 30rpx 20rpx;
		color: #fff;
		border-radius: 80rpx;
		font-size: 30rpx;
		background-color: #27ba9b;
	}
</style>